<template>
  <div class='home'>
    <!-- <van-nav-bar
      title="扫码填报"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <!-- <van-nav-bar class="blue" title="入连人员自主报备" /> -->
    <img src='../../assets/images/rlzzbb.png' />

    <van-form validate-first ref='formDataRef' @submit='onSubmit'>
      <!-- <div block type="info" class="get-area" @click="testNfc" >刷卡读取身份证信息</div> -->
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align='right' label='姓名' v-model='formData.name' readonly name='pattern'
        :rules="[{ required: true, message: '请输入姓名' }]" />
      <!-- <van-field
        input-align="right"
        label="性别"
        required
        v-model="formData.sex"
        name="pattern"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-field input-align='right' label='证件类型' readonly v-model='formData.certificatesType' name='pattern'
        @focus='showCertificate = false' :rules="[{ required: true, message: '请选择证件类型' }]" />
      <van-field input-align='right'  maxlength="18" label='证件号码' readonly v-model='formData.certificatesNo' name='pattern'
        :rules="[{ required: true, message: '请选择证件类型' }]" />
      <!-- <van-field
        input-align="right"
        label="出生日期"
        required
        @focus="showDate = true"
        v-model="formData.bithday"
        name="pattern"
        placeholder="请输入出生日期 例:1975/08/21"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->

      <!-- :rules="[{ required: true, message: '请输入正确内容' }]" -->

      <van-field input-align='right' label='手机号' v-model='formData.phone' readonly name='phoneRules' :rules="[
        { required: true, message: '请输入正确内容' },
        { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
      ]" />
      <van-field input-align='right' label='来连方式' v-model='formData.comeType' readonly :key='new Date().toString()'
        name='pattern' @focus='showTrave = false' :rules="[{ required: true, message: '请选择来连方式' }]" />
      <van-field input-align='right' :label='comeColOne' v-show='showTwoLabel' readonly v-model='formData.comeColOne'
        name='pattern' />
      <van-field input-align='right' :label='comeColTwo' readonly v-show='showTwoLabel' v-model='formData.comeColTwo'
        name='pattern' />
      <van-field input-align='right' :label='comeColThree' readonly v-show='showCarriage'
        v-model='formData.comeColThree' name='pattern' />
      <van-field input-align='right' v-model='formData.startAddrList' readonly name='area' label='出发地'
        @click='showArea = false' :rules="[{ required: true, message: '请选择正确内容' }]" />
      <van-popup v-model:show='showArea' position='bottom'>
        <van-area :area-list='areaList' @confirm='onAreaConfirm' @cancel='showArea = false' />
      </van-popup>
      <van-field input-align='right' label='详细地址' autosize type='textarea' rows='1' maxlength='120' readonly
        v-model='formData.comeAddress' name='pattern' :rules="[{ required: true, message: '请输入正确内容' }]" />

      <van-field input-align='right' v-model='formData.comeDalianTime' readonly name='calendar' label='来连日期'
        @click='goDlShow = false' :rules="[{ required: true, message: '来连日期' }]" />
      <van-calendar v-model:show='goDlShow' @confirm='goYjConfirm' :min-date='new Date(2015, 0, 0)' />
      <van-field input-align='right' name='radio' readonly label='是否中转大连' v-model='zzdlText'></van-field>

      <van-calendar v-model:show='goDlShow' @confirm='goDlConfirm' :min-date='new Date(2015, 0, 0)' />

      <van-field v-if='!end3' input-align='right' v-model='formData.endAddrList' readonly name='area' label='目的地'
        @click='showArea2 = false' :rules="[{ required: true, message: '请选择正确内容' }]" />
      <van-popup v-model:show='showArea2' position='bottom'>
        <!-- value="210200" -->
        <van-area v-model='cascaderArea' :area-list='areaList' @confirm='enAreaConfirm' @cancel='showArea2 = false' />
      </van-popup>
      <van-field v-if='end3' input-align='right' v-model='formData.endAddrList' readonly label='目的地'
        @click='trave_mode_show = false' :rules="[{ required: true, message: '请输入正确内容' }]" />
      <van-popup v-model:show='trave_mode_show' round position='bottom'>
        <van-cascader v-model='cascaderValue' title='请选择目的地' :options='options' @close='trave_mode_show = false'
          @finish='onFinish' />
      </van-popup>
      <van-field input-align='right' label='详细地址' autosize type='textarea' rows='1' readonly v-model='formData.address'
        name='pattern' />

      <van-field input-align='right' label='紧急联系人姓名' v-model='formData.urgentPname' name='pattern' readonly />
      <van-field input-align='right' label='紧急联系人手机号' v-model='formData.urgentPhone' name='pattern' readonly />
      <van-field input-align='right' name='radio' label='途经重点关注地区' readonly v-model='isKeyAreaText'></van-field>
      <van-field input-align='right' name='radio' label='48小时核酸证明' readonly v-model='isNucleicAcidText'></van-field>
      <van-field input-align='right' name='radio' label='健康码状态' readonly v-model='healthyCodeStatusText'></van-field>
      <div inset v-for="(item, index) in formData.daLianRegisterDtos" :model="formData" :key="index" title="同行人">
        <van-cell value="同行人">
          <!-- <template #right-icon>
            <van-icon style="padding-right: 1rem" @click="pushResidentList()" name="plus" class="search-icon">添加
            </van-icon>
            <van-icon @click="removeResident(index)" name="cross" class="search-icon">删除</van-icon>
          </template> -->
        </van-cell>
        <van-field input-align="right" label="姓名" maxlength='25' v-model="formData.daLianRegisterDtos[index].name"
          name="pattern" placeholder="请输入姓名" readonly />
        <van-field input-align="right" label="身份证号" maxlength='18'
          v-model="formData.daLianRegisterDtos[index].certificatesNo" name="pattern" placeholder="请输入身份证号" readonly/>
        <van-field input-align="right" label="手机号" maxlength='11' v-model="formData.daLianRegisterDtos[index].phone"
          name="pattern" placeholder="请输入手机号" readonly/>
      </div>
      <van-row>
        <van-col span='24'>
          <p style='font-size: 17px'>
            &nbsp;&nbsp;&nbsp;健康码、通信行程卡、48小时内核酸检测报告
          </p>
        </van-col>
      </van-row>
      <van-field input-align='right' name='radio' label=''>
        <template #input>
          <div :class="postData.length > 2 ? 'upload-img-5' : 'upload-img-1'">
            <div class='posting-uploader'>
              <div class='posting-uploader-item' v-for='(item, nn) in postData' :key='nn'>
                <img :src='item' alt='图片' class='imgPreview' />
                <!-- <van-icon name="close" @click="delImg(nn)" class="delte" /> -->
              </div>
              <!-- <van-uploader
                :after-read="onRead"
                :accept="'image/*'"
                v-show="postData.length <= 2"
              > -->
              <!-- <img src="../../assets/img/img1.png" alt="等待传图" class="imgPreview"> -->
              <!-- <img src="" alt="等待传图" class="imgPreview"> -->
              </van-uploader>
            </div>
          </div>
        </template>
      </van-field>
      <div style='margin: 16px'>
        <!-- <p style="font-size: 12px">
          <van-checkbox v-model="checked" :disabled="true"  shape="square"
            >我已阅知本申报所列事项，并保证以上报备内容正确属实</van-checkbox
          >
        </p> -->
      </div>
      <div style='margin: 16px; display: flex'>
        <!-- <van-button block type="info" native-type="submit">确认</van-button> -->
      </div>
      <div style='margin: 16px'></div>
      <div id='base64Url'></div>
    </van-form>
    <!-- 省市区弹出 -->
    <van-popup v-model='show' closeable position='bottom' :style="{ height: '100%' }">
      <div class='title'>上车{{ title }}</div>
      <div class='container'>
        <div class='item' v-for='(item, index) in forArea' :key='index' @click='checkoutArea(item)'>
          {{ item.name || item }}
        </div>
      </div>
    </van-popup>
    <!-- 性别类型 -->
    <!-- <van-popup v-model="showSex" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sexColumns"
        @cancel="showSex = false"
        @confirm="onSexConfirm"
      />
    </van-popup> -->

    <!-- 出行交通方式类型 -->
    <van-popup v-model='showTrave' round position='bottom'>
      <van-picker show-toolbar :columns='trave_columns' @cancel='showTrave = false' @confirm='traveConfirm' />
    </van-popup>
    <!-- 证件类型 -->
    <van-popup v-model='showCertificate' round position='bottom'>
      <van-picker show-toolbar :columns='columns' @cancel='showCertificate = false' @confirm='onConfirm' />
    </van-popup>
    <!-- 社区code -->
    <van-popup v-model='showCode' round position='bottom'>
      <van-picker show-toolbar :columns='showCodeColumns' value-key='name' @cancel='showCode = false'
        @confirm='onCodeConfirm' />
    </van-popup>

    <!-- 日期 -->
    <van-popup v-model='showDate' round position='bottom'>
      <van-datetime-picker @confirm='getConfirm' @cancel='showDate = false' :min-date='minDate' type='date'
        title='选择年月日' />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import area from '@/libs/area.json'
import ssq from '@/libs/ssq.json'
import { helpUserNewInsert, getDistrictArea } from '@/api/self/help'
import {
  destinationByCity,
  registerOfficeList,
  getRecordInfoNewById
} from '@/api/self/record'
import { Toast, Dialog } from 'vant'
import lrz from 'lrz'
import xeUtils from 'xe-utils'

export default {
  computed: {
    isKeyAreaText () {
      if (!this.formData) {
        return ''
      }
      switch (this.formData.isKeyArea) {
        case '0':
          return '否'
        case '1':
          return '是'
      }
      return '否'
    },
    zzdlText () {
      switch (this.formData.isTransfer) {
        case '0':
          return '否'
        case '1':
          return '是'
      }
      return '否'
    },
    isNucleicAcidText () {
      if (!this.formData) {
        return ''
      }
      switch (this.formData.isNucleicAcid) {
        case '0':
          return '否'
        case '1':
          return '是'
      }
      return '是'
    },
    healthyCodeStatusText () {
      if (!this.formData) {
        return ''
      }
      switch (this.formData.healthyCodeStatus) {
        case '0':
          return '绿码'
        case '1':
          return '黄码'
        case '2':
          return '红码'
      }
      return ''
    }
  },
  data () {
    return {
      zzdl: '0',
      cascaderArea: '',
      cascaderValue: '',
      showCarriage: false,
      trave_mode_show: false,
      showTwoLabel: false,
      checked: false,
      goDlShow: false,
      showArea: false,
      showArea2: false,
      areaList,
      minDate: new Date(1900, 0, 1),
      showDate: false, // 选择生日
      comeColTwo: '',
      comeColOne: '',
      comeColThree: '',
      columns: ['身份证', '护照', '军官证', '港澳通行证'],
      showCodeColumns: [],
      trave_columns: ['飞机', '火车', '轮渡', '自驾', '客运'],
      // sexColumns:['男','女'],
      formData: {
        comeColTwo: '', // 座位号
        comeColThree: '', // 车厢
        comeColOne: '', // 班次
        urgentPname: '', // 紧急联系人姓名
        urgentPhone: '', // 紧急联系人电话
        comeType: '', // 出行交通方式（0飞机 1火车 2轮渡  3自驾  4客运
        comeDalianTime: '', // 预计抵达日期
        startAddrList: '', // 出发地省市区
        endAddrList: '', // 目的地省市区
        certificatesType: '', // 证件类型
        name: '', // 姓名
        certificatesNo: '', // 身份证
        // sex: '', // 性别
        phone: '',
        codename: '',
        // bithday: '', // 出生日期
        registered_residence: '', // 户口所在地
        companion_id: '', // 陪同id new
        healthyCodeStatus: '0', // 健康状态 new
        uploader: [], // 图片list
        comeAddress: '', // 始发地  new
        address: '', // 返连目的地
        isKeyArea: '0', // 途经重点关注地区
        isNucleicAcid: '1', // 持有核酸检测证明
        code: '',
        enter_type: '7', // （7：入连人员自主报备  8：社区自主报备）
        type: '未排查', // 1 未排查  0 无需排查
        end_addr_district: '',
        end_addr_street: '',
        end_addr_community: '',
        isTransfer: 0, // 0否 1是
        end_addr_province: '',
        end_addr_city: '',
        comeProvinceCode: '',
        comeCityCode: '',
        comeAreaCode: '',
        daLianRegisterDtos: [] // 同行人listƒ
      },
      end3: false,
      // options: ssq,
      options: [],
      forArea: area,
      Province: '', // 省
      city: '', // 市
      area: '', // 区
      title: '省', // 标题省  市  区
      show: false, // 城市选择
      pickerShow: false, // 时间选择
      isGetArea: false, // 是否已经获取上车省市区
      showCertificate: false, // 证件类型
      showCode: false, // 社区code
      showTrave: false, // 出行交通方式类型
      showSex: false, // 性别类型
      phoneRules:
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      postData: []
    }
  },
  mounted () {
    this.init()
    this.checkZzdl()
    this.initRegionalDivisionJson()
    this.formData.certificatesNo = this.$route.query.idCard
    this.formData.name = this.$route.query.name
    this.formData.phone = this.$route.query.mobile
    this.formData.certificatesType = this.$route.query.cardType
    console.log(areaList)
    this.traveConfirm(null)
    // this.formData.code = this.$route.query.code
    window['getNfcData'] = (row) => {
      let r = JSON.parse(row)
      Toast.clear()
      // if (!r.id) return Toast.fail('nfc读取失败')

      for (let i in this.formData) {
        this.formData[i] = ''
      }
      // this.formData.code = this.$route.query.code
      this.formData.isNucleicAcid = '1'
      this.formData.isKeyArea = 0

      this.formData.name = r.name || ''
      this.formData.certificatesNo = r.id || ''
      // this.formData.sex = r.sex || ''
      r.birthday = r.birthday.replace('年', '-')
      r.birthday = r.birthday.replace('月', '-')
      r.birthday = r.birthday.replace('日', '')
      this.formData.bithday = r.birthday || ''
      this.formData.registered_residence = r.address || ''
      this.formData.certificatesType = '身份证'
    }
  },
  methods: {
    init () {
      let data = {
        certificatesNo: this.$route.query.certificatesNo,
        queryCode: this.$route.query.queryCode
      }
      getRecordInfoNewById(data).then((res) => {
        if (res.data.errcode === 0) {
          this.checked = true
          this.formData = res.data.data
          this.postData = res.data.data.picUrls
          let formdata = JSON.parse(JSON.stringify(this.formData))
          this.zzdl = formdata.isTransfer
          this.formData.avenue_flow_area =
            formdata.avenue_flow_area == true ? '1' : '0'
          ; (this.formData.avenue_flow_area == formdata.avenue_flow_area) == true
            ? '1'
            : '0'
          this.formData.nucleic_acid = formdata.nucleic_acid == true ? '1' : '0'
          switch (this.formData.comeType) {
            case '0':
              this.formData.comeType = '飞机'
              break
            case '1':
              this.formData.comeType = '火车'
              break
            case '2':
              this.formData.comeType = '轮渡'
              break
            case '3':
              this.formData.comeType = '自驾'
              break
            case '4':
            default:
              this.formData.comeType = '客运'
              break
          }
          this.traveConfirm(this.formData.comeType)
          switch (this.formData.certificatesType) {
            case '0':
              this.formData.certificatesType = '身份证'
              break
            case '1':
              this.formData.certificatesType = '护照'
              break
            case '2':
              this.formData.certificatesType = '军官证'
              break
            case '3':
              this.formData.certificatesType = '港澳通行证'
              break
            case '4':
              this.formData.certificatesType = '台胞通行证'
              break
            default:
              break
          }
        } else {
          const TIMEOUT = setTimeout(() => {
            Toast.fail(res.data.errmsg)
            clearTimeout(TIMEOUT)
          }, 2000)
        }
      })
    },
    checkZzdl () {
      if (this.zzdl == 0) {
        // 中转大连显示 区街道社区
        this.end3 = true
        this.formData.endAddrList = null
        this.formData.isTransfer = 0
        // this.formData.end_addr_province = null
        // this.formData.end_addr_city = null
        // this.formData.end_addr_district = null
      } else if (this.zzdl == 1) {
        // 中转大连显示 否 省市区
        this.end3 = false
        this.formData.endAddrList = null
        this.formData.isTransfer = 1
        // this.formData.end_addr_district = null
        // this.formData.end_addr_street = null
        // this.formData.end_addr_community = null
      }
    },
    initRegionalDivisionJson () {
      registerOfficeList().then((res) => {
        if (res.data.errcode === 0) {
          this.options = JSON.parse(res.data.data)

          // getDistrictArea().then((res) => {
          //   this.areaList = JSON.parse(res.data.data)
          //   console.log('this.areaList====',this.areaList)
          //  })
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    // 区街道社区
    onFinish ({ selectedOptions }) {
      this.trave_mode_show = false
      this.formData.endAddrList = selectedOptions
        .map((option) => option.text)
        .join('/')

      this.formData.end_addr_district = selectedOptions[0].value
      this.formData.end_addr_street = selectedOptions[1].value
      this.formData.end_addr_community = selectedOptions[2].value

      this.formData.end_addr_province = null
      this.formData.end_addr_city = null
      // this.formData.chargeBarrier =
      //   selectedOptions[2] == null
      //     ? selectedOptions[1].text
      //     : selectedOptions[2].text
    },
    // 省市区
    enAreaConfirm (value) {
      this.showArea2 = false
      this.formData.endAddrList = value
        // .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      let data = this.formData.endAddrList.split('/')

      console.log(data)
      console.log('value[0].value=======', data[0])
      this.formData.end_addr_province = data[0]
      this.formData.end_addr_city = data[1]
      this.formData.end_addr_district = data[2]

      // this.formData.comeCityCode = null
      // this.formData.comeAreaCode = null

      // this.formData.endAddrList = value
      //   .filter((item) => !!item)
      //   .map((item) => item.name)
      //   .join('/')
      // let endAdd = { name: this.formData.endAddrList }
      // destinationByCity(endAdd).then((res) => {
      //   if (res.data.errcode === 0) {
      //     this.showCodeColumns = res.data.data
      //   } else {
      //     Toast.fail(res.data.msg)
      //   }
      // })
    },
    goYjConfirm (value) {
      const formatDate = (value) =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.comeDalianTime = yy + '-' + mm + '-' + dd
      this.goYjShow = false
    },
    delImg (index) {
      // 删除指定下标的图片对象
      if (isNaN(index) || index >= this.postData.length) {
        return false
      }
      let tmp = []
      for (let i = 0, len = this.postData.length; i < len; i++) {
        if (this.postData[i] !== this.postData[index]) {
          tmp.push(this.postData[i])
        }
      }
      this.postData = tmp
    },
    dataURLtoFile (dataurl, filename) {
      // 将base64转换为file文件
      // 参数dataurl base64字符串
      // 参数filename	图片名称
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {
        type: mime
      })
    },
    onRead (file) {
      lrz(file.file, { quality: 0.1 }).then((rst) => {
        file.content = rst.base64
        this.postData.push(file) // postData是一个数组
      })
    },
    getConfirm (value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.bithday = yy + '-' + mm + '-' + dd
      this.showDate = false
    },
    onAreaConfirm (value) {
      this.showArea = false
      console.log('value====', value)
      this.formData.startAddrList = value
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.formData.comeProvinceCode = value[0].name
      this.formData.comeCityCode = value[1].name
      this.formData.comeAreaCode = value[2].name
    },

    onConfirm (value) {
      this.label = value
      this.formData.certificatesType = value
      this.showCertificate = false
    },
    onCodeConfirm (value) {
      this.formData.code = value.value
      this.formData.codename = value.name
      this.showCode = false
    },

    traveConfirm (value) {
      // this.label = value
      if (!value) {
        // value = '飞机'
        // this.formData.comeType = '飞机'
      }
      this.showTrave = false
      if (value == '飞机') {
        // 飞机
        this.comeColOne = '航班号'
        this.comeColTwo = '座位号'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '火车') {
        // 火车
        this.comeColOne = '车次'
        this.comeColTwo = '席位'
        this.comeColThree = '车厢'
        this.showTwoLabel = true
        this.showCarriage = true
      } else if (value == '轮渡') {
        // 轮渡
        this.comeColOne = '轮船航班'
        this.comeColTwo = '舱位号'
        // this.comeColThree = '车厢'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '自驾') {
        // 自驾
        this.comeColOne = '车牌信息'
        this.comeColTwo = '到达收费口'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '客运') {
        // 客运
        this.comeColOne = '车牌号'
        this.comeColTwo = '席位'
        this.showTwoLabel = true
        this.showCarriage = false
      }

      this.formData.comeType = value
    },
    goDlConfirm (value) {
      const formatDate = (value) =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.comeDalianTime = yy + '-' + mm + '-' + dd
      this.goDlShow = false
    },
    onSexConfirm (value) {
      this.label = value
      this.formData.sex = value
      this.showSex = false
    },
    testNfc () {
      // 测试用户终端
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {
        Toast.loading({
          message: '正在识别...',
          forbidClick: true,
          duration: 20000
        })
        window.Android.useNFCReadIdCard('123')
      }
      if (isiOS) {
        return Toast.fail('抱歉\n暂不支持ios')
      }
    },
    onSubmit () {
      if (this.checked == false) {
        Toast.fail('请确认报备内容正确属实')
        return
      }

      this.$refs.formDataRef.validate().then(() => {
        let formdata = JSON.parse(JSON.stringify(this.formData))
        // formdata.sex = this.formData.sex=='男'?1:0
        formdata.comeType === '飞机'
          ? (formdata.comeType = 0)
          : formdata.comeType === '火车'
            ? (formdata.comeType = 1)
            : formdata.comeType === '轮渡'
              ? (formdata.comeType = 2)
              : formdata.comeType === '自驾'
                ? (formdata.comeType = 3)
                : (formdata.comeType = 4)
        formdata.companion_id = this.$route.query.id
        // formdata.isKeyArea = formdata.isKeyArea == '1' ? true : false
        // formdata.isNucleicAcid = formdata.isNucleicAcid == '1' ? true : false
        formdata.uploader = this.postData
        formdata.certificatesType === '军官证'
          ? (formdata.certificatesType = 2)
          : formdata.certificatesType === '护照'
            ? (formdata.certificatesType = 1)
            : (formdata.certificatesType = 0)
        if (formdata.certificatesType == 2) {
          // 军官证
          var reg = /^[CW]\d{8}$/
          if (reg.test(formdata.certificatesNo) === false) {
            Dialog.alert({
              message: '港澳同行证不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => {
            })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        } else if (formdata.certificatesType == 1) {
          // 护照
          var reg = /^([a-zA-z]|[0-9]){5,17}$/
          if (reg.test(formdata.certificatesNo) === false) {
            Dialog.alert({
              message: '护照不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => {
            })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        } else if (formdata.certificatesType == 0) {
          // 身份证号
          var reg =
            /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)|(^[HMhm]{1}([0-9]{10}|[0-9]{8})$)/
          if (reg.test(formdata.certificatesNo) === false) {
            Dialog.alert({
              message: '身份证号不合法',
              showCancelButton: false,
              showConfirmButton: false
            }).then(() => {
            })
            const TIMEOUT = setTimeout(() => {
              Dialog.close()
              clearTimeout(TIMEOUT)
            }, 2000)
            return false
          }
        }
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 10000
        })
        helpUserNewInsert(formdata).then((res) => {
          Toast.clear()
          if (res.data.errcode === 0) {
            this.$router.push({
              name: 'recordNewQrCode',
              query: {
                qrUrl: res.data.data.qrUrl,
                certificatesNo: res.data.data.certificatesNo
              }
            })
            // Dialog.alert({
            //   message: '提交成功',
            //   showCancelButton: false,
            //   showConfirmButton: false,
            // }).then(() => {})
            // const TIMEOUT = setTimeout(() => {
            //   Dialog.close()
            //   clearTimeout(TIMEOUT)
            // }, 2000)
            // 提交成功清空数据
            for (let i in this.formData) {
              this.formData[i] = ''
              this.formData.isKeyArea = 1
            }
          } else {
            Toast.fail(res.data.errmsg)
          }
        })
      })
    },
    checkoutArea (item) {
      if (!this.Province) {
        // 选择省
        this.Province = item.name
        this.forArea = item.child
        this.title = '市'
      } else if (!this.city) {
        // 选择市
        this.city = item.name
        this.forArea = item.child
        this.title = '区'
      } else if (!this.area) {
        // 选择区
        this.area = item
        this.show = false
        this.title = '省'
        // 拼接省市区 展示页面
        this.formData.start_station_addr =
          this.Province + '/' + this.city + '/' + this.area

        this.forArea = area
        // 清空省市区 为了下一次选择省市区
        this.Province = ''
        this.city = ''
        this.area = ''
      }
    }
  },
  created () {
  },
  watch: {
    'formData.comeType': {
      handler (newVal, oldVal) {
        console.log('this.formData.comeColTwo======' + this.formData.comeColTwo)
        console.log('newVal======', newVal)
        if (newVal == null || newVal == '') {
          return
        }
        var u = window.navigator.userAgent
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g

        if (this.formData.name == '' || this.formData.name == undefined) {
          this.formData.comeType = ''
          return Toast.fail('请输入姓名')
        }
        if (
          this.formData.certificatesType == '' ||
          this.formData.certificatesType == undefined
        ) {
          this.formData.comeType = ''
          return Toast.fail('请选择证件类型')
        }
        if (
          this.formData.certificatesNo == '' ||
          this.formData.certificatesNo == undefined
        ) {
          this.formData.comeType = ''
          return Toast.fail('请输入证件号')
        }
        if (this.formData.phone == '' || this.formData.phone == undefined) {
          this.formData.comeType = ''
          return Toast.fail('请输入电话号码')
        }
      },
      deep: true
    }
  }
}
</script>
<style lang='less' scoped>
.upload-img-5 {
  margin: 5px 0 90px 0;
}

.upload-img-1 {
  margin: 5px 0 15px 0;
}

.home {
  background: url('../../assets/images/smtb.jpg') no-repeat;

  img {
    // background: url('../../assets/images/smtb.jpg');
    width: 100%;
  }

  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }

  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }

  /deep/ .van-field__label {
    width: 9em;
  }

  /deep/ .van-field__error-message {
    text-align: right;
  }

  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }

  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;

    .item {
      margin: 10px;
    }
  }
}

.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}

.home .blue {
  background-color: transparent;
}

.home .van-cell {
  background-color: transparent;
}
</style>
